<template>
  <Form class="events-form"
        :label-width="100"
        inline>
    <!-- <FormItem label="分公司选择" :label-width="120">
      <Select v-model="subCompany">
        <Option v-for="item in subCompanyList" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem> -->
    <FormItem label="道路选择">
      <Select v-model="roadname">
        <Option v-for="item in roadnameList"
                :value="item.ch_name"
                :key="item.ch_name">
          {{ item.ch_name }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="报警类型">
      <Select v-model="event">
        <Option v-for="item in eventList"
                :value="item.value"
                :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <!-- <FormItem label="报警类型">
      <Select v-model="eventAction">
        <Option v-for="item in actionsList" :value="item.label" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem> -->
    <!-- <FormItem label="报警等级">
      <Select v-model="eventLevel">
        <Option v-for="item in levelList" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </!-->
    <FormItem label="报警时间">
      <DatePicker v-model="queryTimeRange"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="选择日期"
                  style="width: 210px">
      </DatePicker>
    </FormItem>
    <FormItem :label-width="20">
      <Button type="primary"
              style="margin-top:0px;"
              @click="searchData('buttom')">查询</Button>
      <!-- <Button style="margin-left: 8px">重置</Button> -->
    </FormItem>
  </Form>
</template>

<script>
// 工具
import dayjs from "dayjs";
import { mapState, mapGetters, mapActions } from "vuex";
import constData from "@/util/constData2";

export default {
  data() {
    return {
      //subCompany: "xian",
      roadname:
        typeof this.$route.params.roadname != "undefined"
          ? this.$route.params.roadname
          : "全部",
      event: "all",
      //eventAction: "全部",
      //eventLevel: "4",
      queryTimeRange: "",
      subCompanyList: constData.subCompanyList, // 子公司列表
      // roadnameList: constData.roadnameList, // 站点列表
      roadnameList: this.allRoadListData, // 道路列表
      eventList: constData.eventList, // 场景列表
      actionList: constData.actionList, // 动作列表
      levelList: constData.levelList, // 违规级别列表
      actionsList: constData.actionsList //报警类型
    };
  },
  computed: {
    ...mapState(["eventsPageCurrent", "eventsPageSize", "allRoadListData"]),
    getRoadNameList() {
      return this.allRoadListData;
    }
  },
  watch: {
    getRoadNameList: function (val) {
      this.roadnameList = val;
      console.log("change val:", val)
      console.log("change list:", this.roadnameList)
      // for (let i = 0; i < this.roadnameList.length; i++) {
      //   console.log(this.roadnameList[i].ch_name)
      // }
    },
    event: {
      deep: true,
      handler() {
        this.actionsList = this.actionList.filter((ele, index) => {
          return ele.event === this.event;
        });
      }
    },
    eventsPageCurrent(value) {
      this.searchData("page");
    }
  },
  created() {
    // this.getAllRoadList();
  },
  mounted() {
    this.getAllRoadList();
    console.log("this.allRoadListData:", this.allRoadListData)
    this.searchData("page");
  },
  methods: {
    ...mapActions(["getAllRoadList", "getQueryEventsTableData", "updateEventsQueryPageIndex"]),
    searchData(type) {
      if (type === "buttom") this.updateEventsQueryPageIndex(1); // 每次查询的时候先更新页码为 1 开始
      // console.log("点击查询按钮：",this.eventAction)

      let roadname = this.roadname === "全部" ? "" : this.roadname;
      let event = this.event === "all" ? "" : this.event;
      // if (event === "行人入侵") {
      //   event = "行人入侵,反光衣"
      //   console.log("查询（行人入侵,反光衣）")
      // }
      //let action = this.eventAction === "全部" ? "" : this.eventAction;
      //let level = this.eventLevel === "4" ? "" : this.eventLevel;
      let page_index = this.eventsPageCurrent;
      let page_size = this.eventsPageSize;

      if (this.queryTimeRange[0] === "") {
        // this.queryTimeRange[0] = dayjs()
        //   .startOf("day")
        //   .format("YYYY-MM-DD HH:mm:ss"); //获取一天初
        this.queryTimeRange[0] = dayjs()
          .subtract(7, "day")
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"); //获取一天初
        this.queryTimeRange[1] = dayjs().format("YYYY-MM-DD 23:59:59");

        let eventsParams = {
          start_time: this.queryTimeRange[0],
          end_time: this.queryTimeRange[1],
          road_name: roadname,
          event: event,
          //action: action,
          //level: level,
          page_index: page_index,
          page_size: page_size
        };
        this.getQueryEventsTableData(eventsParams);
      } else {
        let eventsParams = {
          start_time: dayjs(this.queryTimeRange[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          end_time: dayjs(this.queryTimeRange[1]).format("YYYY-MM-DD 23:59:59"),
          road_name: roadname,
          event: event,
          //action: action,
          //level: level,
          page_index: page_index,
          page_size: page_size
        };
        this.getQueryEventsTableData(eventsParams);
      }
    }
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;

.events-form .ivu-form {
  font-size: 18px !important;
}
.events-form .ivu-form-item {
  margin-bottom: 0px;
}
.events-form .ivu-form-item-label {
  font-size: 18px !important;
  color: @font-color;
  font-weight: bold;
}
.events-form .ivu-form-item-content {
  line-height: 30px;
}
.events-form .ivu-select-selected-value {
  font-size: 1.8rem !important;
  height: 30px !important;
  line-height: 30px !important;
  color: @font-color;
  font-weight: bold;
}
.events-form .ivu-select-selection {
  width: 180px;
  height: 30px !important;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.events-form .ivu-select-dropdown {
  background-color: @background-color;
  max-height: 300px;
}
.events-form .ivu-select-item {
  color: @font-color;
  font-size: 1.8rem !important;
  font-weight: bold;
}
.events-form .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.events-form .ivu-select-placeholder {
  font-size: 1.8rem !important;
  height: 30px !important;
  line-height: 30px !important;
  font-weight: bold;
}
.events-form .ivu-select-item-focus {
  background-color: @background-color;
}
.events-form .ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.events-form .ivu-date-picker-cells-cell-selected em,
.ivu-date-picker-cells-cell-selected:hover em {
  // color: #52c41a !important;
  color: #1081b2 !important;
}
.events-form .ivu-date-picker-cells-cell-range:before {
  background-color: #1081b2 !important;
  // background-color: #52c41a !important;
}
</style>
